<template>
  <div class="page-box">
    <Header @get_height="height => (header_height = height)" :plat_info="plat_info" />
    <div class="home-box common_view" :style="{ 'min-height': window_height - header_height + 'px' }">
      <h2>您的AI论文写作助理</h2>
      <p>在校学生、职场精英都在用的AI论文辅助写作平台</p>
      <ul>
        <li v-for="item in introList" :key="item">
          <svg xmlns="http://www.w3.org/2000/svg" width="15" height="16" fill="none">
            <path fill="#4B4B4B"
              d="M7.5.14a7.5 7.5 0 1 0 7.5 7.5A7.508 7.508 0 0 0 7.5.14Zm4.33 5.126L7.55 11.07a.631.631 0 0 1-.894.118L3.603 8.746a.625.625 0 0 1 .78-.976l2.548 2.038 3.892-5.282a.626.626 0 1 1 1.006.74Z">
            </path>
          </svg>
          {{ item }}
        </li>
      </ul>
      <div class="form-wrap">
        <div class="form-box">
          <div class="flex-box">
            <el-cascader v-model="subject_value" :options="subject_list" placeholder="请选择科目" />
            <el-input placeholder="请在此输入完整的论文题目" v-model="topic_value" />
          </div>
          <div class="text-center">
            <label>选择学历</label>
            <el-radio-group v-model="education_id">
              <el-radio v-for="item in education_list" :label="item.id">{{ item.name }}</el-radio>
            </el-radio-group>
          </div>
          <el-button class="btn-submit" @click="create_btn_click()">
            <svg xmlns="http://www.w3.org/2000/svg" width="31" height="30" fill="none">
              <path fill="#fff"
                d="M14.027 11.637a.999.999 0 0 0 .759-.759l.886-3.986c.232-1.044 1.72-1.044 1.952 0l.886 3.986c.084.38.38.675.759.76l3.986.885c1.044.232 1.044 1.72 0 1.952l-3.986.886a.999.999 0 0 0-.76.76l-.885 3.985c-.232 1.044-1.72 1.044-1.952 0l-.886-3.986a.999.999 0 0 0-.76-.759l-3.985-.886c-1.044-.232-1.044-1.72 0-1.952l3.986-.886ZM8.713 19.823a.999.999 0 0 0 .759-.759l.27-1.22c.098-.438.722-.438.819 0l.27 1.22c.085.38.38.675.76.76l1.22.27c.438.097.438.721 0 .818l-1.22.271a.999.999 0 0 0-.76.76l-.27 1.22c-.097.437-.721.437-.818 0l-.271-1.22a.999.999 0 0 0-.76-.76l-1.22-.27c-.437-.098-.437-.722 0-.819l1.22-.27Z">
              </path>
            </svg>
            <span>免费生成大纲</span>
          </el-button>
        </div>
      </div>
      <!-- 我的文档弹窗 -->
      <CreateDocument ref="create_document_ref" @download_btn_click="document_download_btn_click"
        @pay_btn_click="document_pay_btn_click" />
      <!-- 论文结果 -->
      <PaperResult :outline_list="outline_list" :openReportAmount="openReportAmount"
        :openReportAmountOld="openReportAmountOld" :topic_name="topic_value" :subject_value="subject_value"
        :education_id="education_id" :education_name="education_list[education_current].name" ref="paper_result_ref"
        @order_change="paper_result_order_change" @order_success="is_order = 1" @download_change="is_download = 1">
      </PaperResult>
      <Footer />
    </div>
    <!-- 侧边栏 -->
    <div class="slide_control">
      <div class="slide_item" @click="share_btn_click()">
        <img src="@/assets/images/17.png" alt="" srcset="" class="icon" />
        <p class="name">分享得现金</p>
      </div>
      <div class="slide_item" @click="example_download_btn_click()">
        <img src="@/assets/images/18.png" alt="" srcset="" class="icon" />
        <p class="name">范文样例</p>
      </div>
      <div class="slide_item" @click="my_document_btn_click()">
        <img src="@/assets/images/19.png" alt="" srcset="" class="icon" />
        <p class="name">我的论文</p>
      </div>
      <div class="slide_item" v-if="plat_info">
        <img src="@/assets/images/20.png" alt="" srcset="" class="icon" />
        <p class="name">
          商务合作
          <br />
          校园代理
        </p>
        <div class="code_img">
          <div class="img_1"><img :src="plat_info.customerImg" /></div>
        </div>
      </div>
    </div>
    <OutlineStep ref="outline_step_ref" />
    <ShareAward ref="share_award_ref" />
  </div>
</template>

<script>
// @ is an alias to /src
import CreateStep from '@/components/CreateStep.vue';
import OutlineStep from '@/components/OutlineStep.vue';
import CreateDocument from '@/components/CreateDocument.vue';
import PaperResult from '@/components/PaperResult.vue';
import ShareAward from '@/components/ShareAward.vue';
import { setWxInfo } from "@/utils/util.js";
export default {
  name: 'home',
  components: {
    CreateStep,
    OutlineStep,
    CreateDocument,
    PaperResult,
    ShareAward
  },
  data() {
    return {
      introList: [
        '论文正文',
        '文献综述',
        '中英文摘要',
        '参考文献',
        '致谢模板',
        '开题报告'
      ],
      plat_info: null,
      source: sessionStorage.getItem('source'),
      is_order: 0,
      is_download: 0,
      openReportAmount: 0,
      openReportAmountOld: 0,
      topic_value: '',
      subject_value: [],
      header_height: 0,
      window_height: 0,
      education_id: 1,
      education_list: [
        {
          name: '专科',
          id: 1
        },
        {
          name: '本科',
          id: 2
        },
        {
          name: '硕士研究生',
          id: 3
        },
        {
          name: '在职员工',
          id: 4
        }
      ],
      subject_list: [],
      outline_list: []
    };
  },
  computed: {
    education_current() {
      return this.education_list.findIndex(item => item.id == this.education_id)
    },
    step_current() {
      if (this.outline_list.length) {
        if (this.is_download == 1) {
          return 3;
        }
        if (this.is_order == 1) {
          return 2;
        }
        return 1;
      }
      return 0;
    }
  },
  created() {
    setWxInfo(this);
    this.get_plat_info();
    this.get_subject_list();
  },
  mounted() {
    this.get_window_height();
  },
  updated() {
    this.get_window_height();
  },
  methods: {
    get_plat_info() {
      this.$request
        .get('api/paper/get/tongji')
        .then(res => {
          this.plat_info = res.data;
        })
    },
    paper_result_order_change() {
      this.is_order = 1;
      this.$refs.create_document_ref.get_order_list();
    },
    get_window_height() {
      this.window_height = window.innerHeight;
    },
    document_download_btn_click(item) {
      this.$refs.paper_result_ref.order_list_item_download(item);
    },
    document_pay_btn_click(item) {
      this.$refs.paper_result_ref.order_list_item_pay(item);
    },
    my_document_btn_click() {
      const create_document_ref = this.$refs.create_document_ref;
      create_document_ref.open();
    },
    example_download_btn_click() {
      window.open('https://file.daqeesoft.com/app/范文示例.zip');
    },
    share_btn_click() {
      const share_award_ref = this.$refs.share_award_ref;
      share_award_ref.open();
    },
    // 点击生成大纲
    create_btn_click() {
      let msg;
      if (!this.topic_value) {
        msg = '请输入完整的论文题目';
      } else if (!this.subject_value.length) {
        msg = '请选择科目';
      }
      if (msg) {
        this.$message.error(msg);
        return;
      }
      this.is_download = 0;
      this.is_order = 0;

      let outline_step_ref = this.$refs.outline_step_ref;
      outline_step_ref.open();
      this.$request
        .post('/api/paper/outline/create', {
          title: this.topic_value,
          xueke: this.subject_value[1],
          level: this.education_id
        })
        .then(res => {
          outline_step_ref.close();
          this.outline_list = [];
          if (res && res.data && res.data.paragraphs) {
            let outline_list = res.data.paragraphs;
            for (let i = 0; i < outline_list.length; i++) {
              let item = outline_list[i];
              if (i > 0) {
                item.is_drop = false;
              } else {
                item.is_drop = true;
              }
            }
            this.outline_list = outline_list;
            this.openReportAmount = res.data.openReportAmount;
            this.openReportAmountOld = res.data.openReportAmountOld;
          }
        })
        .catch(() => {
          outline_step_ref.close();
        });
    },
    get_subject_list() {
      this.$request.post('/api/paper/get/subject').then(res => {
        this.subject_list = res.data;
      });
    }
  }
};
</script>